<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-16 16:29:00
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-02-20 10:11:19
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\basicInformation\skuManage\skuInformation\components\matchSpu.vue
-->
<template>

  <pb-popup v-model="isShow" :title="`${searchForm.skuName}-匹配SPU(当前匹配：${searchForm.spuCommonlyName})`"
    @cancelFn="offPopup" @confirmFn="onSave">
    <div v-loading="loading">

      <el-form label-width="auto" inline>
        <div class="position-relative">
          <el-form-item label="SPU名称">
            <pb-input v-model.trim="searchForm.spuName" @keyup.enter="getSpuInfoListApi" placeholder="请输入SPU名称"
              width="200px"></pb-input>
          </el-form-item>
          <el-form-item label="SPU类别" prop="spuClassCode">
            <pb-tree-select v-model="searchForm.spuClassCode" :Data="spuTreeData" width="200"
              :defaultProps="{ children: 'children', label: 'spuClassName', value: 'spuClassCode' }"
              @change="getSpuInfoListApi" />
          </el-form-item>
          <div class="position-absolute right-0 top-0">
            <pb-button size="small" @click="getSpuInfoListApi">查询</pb-button>
          </div>
        </div>
      </el-form>

      <pb-table :column="spuColumn" :tableData="spuTableData" height="500px">
        <template #operate="{ row }">
          <pb-button size="small" text @click="handlerMatch(row)">匹配</pb-button>
        </template>
      </pb-table>
      <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize" @onChange="onPagesChange"
        :total="pages.total"></pb-pagination>
    </div>
  </pb-popup>

</template>

<script setup lang="ts">
import { getSpuClassTreeApi } from "@/utils/globalFn";
import { skuMatchSpu } from '@/api/Sku'
import { getSpuInfoList, } from '@/api/Spu'
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import variables from "@/styles/variables.module.scss";

const emits = defineEmits(['refresh'])
const isShow = ref(false)
const loading = ref(false)
const spuColumn = reactive([

  {
    key: "spuClassName",
    name: "SPU类别",
  },
  {
    key: "spuName",
    name: "SPU名称",
  },
  {
    slot: "operate",
    name: "操作",
    width: 100,
  },
]);

const spuTableData = ref([])

const formOrigin = () => ({
  skuName: null,
  spuClassCode: null,
  spuName: null,
  skuCode: null,
  spuCommonlyName: '',
})

const searchForm = ref(formOrigin())

const pageInit = () => ({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const pages = ref(pageInit());
const onPagesChange = () => {
  getSpuInfoListApi()
};


const spuTreeData = ref([])
const showFn = (data) => {
  searchForm.value.skuName = data.skuName
  searchForm.value.skuCode = data.skuCode
  searchForm.value.spuCommonlyName = data.spuCommonlyName ? data.spuCommonlyName : ''
  isShow.value = true

  getSpuClassTreeApi().then(res => {
    spuTreeData.value = res
    getSpuInfoListApi()
  })
}

const getSpuInfoListApi = () => {
  loading.value = true
  return new Promise<void>((resolve, reject) => {
    let { currentPage, pageSize } = { ...pages.value };
    let { skuName, skuCode, spuCommonlyName, ...args } = { ...searchForm.value }
    let params = {
      currentPage, pageSize,
      ...args
    }
    getSpuInfoList(params).then(res => {
      loading.value = false
      if (res.code == 2000) {
        spuTableData.value = res.data.records
        pages.value.total = res.data.total
      }
    })
  })
}

const curCode = ref('')
const handlerMatch = (row) => {
  console.log(row)
  searchForm.value.spuCommonlyName = row.commonlyName
  curCode.value = row.spuCode
  console.log(curCode.value)
}
const offPopup = () => {
  isShow.value = false
  searchForm.value = formOrigin()
};
const onSave = () => {
  return new Promise<void>((resolve, reject) => {
    skuMatchSpu({ skuCode: searchForm.value.skuCode, spuCode: curCode.value }).then(res => {
      if (res.code == 2000) {
        createMessage({
          message: '操作成功'
        })
        emits('refresh')
        isShow.value = false
      }
    })
  })
}


defineExpose({ showFn })
</script>



<style lang="scss" scoped>
::v-deep .el-form--inline .el-form-item {
  vertical-align: inherit
}
</style>
